<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <script>

        $(function () {
            axios.get("/webDemo/car/getCar").then(function (info) {
                let userName = info.data.data.name
                $(".userName").html(userName)
                let carList = info.data.data.list
                $(".countPrice").html(info.data.data.countPrice)
                $.each(carList, function (index,it) {
                    $(".books").append(`<li class="item">
                                            <div class="line"></div>
                                            <div class="content">
                                                <img class="icon" src=${it.img} >
                                                <label class="title">${it.bookName}</label>
                                                <label class="price">￥${it.price}</label>
                                                <label class="num">X${it.num}</label>
                                            </div>

                                        </li>`)
                })
            })
        })
    </script>
    <style>
        .books{
            list-style: none;
            width: 1200px;

        }
        .icon{
            width: 80px;
            height: 80px;
            object-fit: contain;
        }
        .content{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .line{
            width: 1200px;
            height: 2px;
            background-color: burlywood;
        }
    </style>
</head>
<body>
<div style="width: 1200px; padding-left: 50px; display: flex;justify-content: space-between ">
    <div>用户昵称：<label class="userName"></label> </div>
    <div>总价格：<label class="countPrice"></label></div>
</div>
<ul class="books">

</ul>
</body>
</html>